<template>
	<section class="category">
		<Navbar :title="'分类'" />
		<Recreation :title="'案例'" />

		<div @click="video">去看短视频</div>
		<div @click="handleCity">去选择城市</div>
		当前城市：{{getCity}}

		<div>
			<van-button type="primary" @click="handleClick">主要按钮</van-button>
		</div>

		<Child ref="getChild" />
		<Tabs />
	</section>
</template>

<script>
	import { defineAsyncComponent, getCurrentInstance, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { mapGetters, useStore } from 'vuex'
	export default {
		computed: {
			...mapGetters([
				'getCity',
			])
		},
		setup() {
			// console.log(getCurrentInstance())
			const getChild = ref()
			const router = useRouter()
			const store = useStore()
		
			const video = () => {
				let id = 12
				router.push({
					path: `/video/${id}`
				})
			}

			const handleCity = ()=> {
				router.push({
					path: 'city-list'
				})
			}

			const handleClick = () => {
				getChild.value.init()
				store.dispatch({
					type: 'getCategory'
				})
			}

			return {
				video,
				handleCity,
				handleClick,
				getChild
			}
		},
		components: {
			Recreation: defineAsyncComponent({
				loader: ()=> import('../Recreation/index.vue')
			}),
			Child: defineAsyncComponent({
				loader: ()=> import('./child.vue')
			})
		}
	}
</script>

<style scoped lang="scss">
	.category {
		.recreation {
			padding-top: 90px;
		}
	}
</style>